<template>
	<custom-page title="订单详情" backgroundColor="#F9F9F9">
		<template #content>
			<view class="page-content">
				<view class="time-layout" v-if="false">订单剩余支付时间：24:32:12</view>
				<view class="time-layout" v-if="orderDetailInfo.orderStatus==5">等待管理员处理</view>
				<view class="bg-layout">
					<view class="store">
						<view>{{orderDetailInfo.assistantName}}</view>
						<image class="assistant-leve" :src="orderDetailInfo.assistantPicture"></image>
					</view>
					<view class="content">台球店铺：{{orderDetailInfo.pollName}}</view>
					<view class="content">服务开始时间：{{orderDetailInfo.serviceStartTime}}</view>
					<view class="content">服务结束时间：{{orderDetailInfo.serviceEndTime}}</view>
					<view class="content">订单金额：￥{{orderDetailInfo.totalPaymentStr}}</view>
					<view style="height: 32rpx;"></view>
				</view>
				<view style="height: 16rpx;"></view>
				<view class="bg-layout">
					<view class="item-row-divider">
						<view>订单编号</view>
						<view>{{orderDetailInfo.orderNo}}</view>
					</view>
					
					<view class="item-row-divider">
						<view>下单时间</view>
						<view>{{orderDetailInfo.createTime}}</view>
					</view>
					
					<view class="item-row-divider" v-if="orderDetailInfo.receivingOrderTime">
						<view>接单时间</view>
						<view>{{orderDetailInfo.receivingOrderTime}}</view>
					</view>
					<view class="item-row-divider" v-if="orderDetailInfo.pollRoomNumber">
						<view>台球桌号</view>
						<view>{{orderDetailInfo.pollRoomNumber}}</view>
					</view>
					
					<view class="item-row-divider" v-if="orderDetailInfo.practicalServiceStartTime">
						<view>服务开始</view>
						<view>{{orderDetailInfo.practicalServiceStartTime}}</view>
					</view>
					<view class="flex-wrap-row" v-if="orderDetailInfo.serverStartPictureUrl">
						<image class="image-info" :src="item" mode="aspectFill" v-for="(item, index) in getServiceImage(orderDetailInfo.serverStartPictureUrl)" 
						@click="imagePreviewClick(getServiceImage(orderDetailInfo.serverStartPictureUrl), index)"></image>
					</view>
					
					<view class="item-row-divider" v-if="orderDetailInfo.practicalServiceEndTime">
						<view>服务结束</view>
						<view>{{orderDetailInfo.practicalServiceEndTime}}</view>
					</view>
					<view class="flex-wrap-row" v-if="orderDetailInfo.serverStopPictureUrl">
						<image class="image-info" :src="item" mode="aspectFill" v-for="(item, index) in 
						getServiceImage(orderDetailInfo.serverStopPictureUrl)" @click="imagePreviewClick(getServiceImage(orderDetailInfo.serverStopPictureUrl), index)"></image>
					</view>
					
					<view class="item-row">
						<view>订单状态</view>
						<view>{{orderDetailInfo.orderStatusDesc}}</view>
					</view>
				</view>
				<view style="height: 16rpx;"></view>
				<view class="bg-layout" v-if="orderDetailInfo.orderStatus != 0">
					<view class="item-row">
						<view>支付金额</view>
						<view class="money">¥{{orderDetailInfo.actualPaymentStr}}</view>
					</view>
					<view class="divider"></view>
					<view class="item-row">
						<view>支付方式</view>
						<view>微信支付</view>
					</view>
					<view class="divider"></view>
					<view class="item-row">
						<view>支付时间</view>
						<view>{{orderDetailInfo.paymentTime}}</view>
					</view>
				</view>
				<contact-service btnType="1"></contact-service>
				<view style="height: 32rpx;"></view>
			</view>
		</template>
		<template #foot>
			<view class="bottom-row">
				<view class="pay-amount" v-if="orderDetailInfo.orderStatus==0">￥{{orderDetailInfo.totalPaymentStr}}</view>
				<view style="flex: 1;"></view>
				<view class="btn2" @click.stop="abnormalClick(orderDetailInfo)"
					v-if="(orderDetailInfo.orderStatus==2 || orderDetailInfo.orderStatus==3 || orderDetailInfo.orderStatus==4 || orderDetailInfo.orderStatus==5)">异常申诉</view>
					
				<view class="btn1" @click.stop="abnormalRecordClick(orderDetailInfo)"
						v-if="(orderDetailInfo.orderStatus!=0)">申诉记录</view>
					
				<view class="btn2" @click.stop="payNowClick(orderDetailInfo)" v-if="orderDetailInfo.orderStatus==0">立即支付</view>
			</view>
		</template>
	</custom-page>
</template>

<script>
	export default {
		computed: {
			getServiceImage(){
				return (imageStr)=> {
					if(imageStr){
						return imageStr.split(',')
					}else{
						return []
					}
				}
			}
		},
		data() {
			return {
				orderDetailInfo: {},
			}
		},
		onLoad(val) {
			this.getOrderDetail(val.id)
		},
		methods: {
			//订单详情
			getOrderDetail(id){
				this.requestCenter.getOrderDetail(id).then(res => {
					this.orderDetailInfo = res
				})
			},
		
			
			//立即支付
			payNowClick(item){
				uni.login({
					provider: 'weixin', //使用微信登录
					success: (loginRes) => {
						let rousePayParams = {
							orderNo: item.orderNo,
							wxCode: loginRes.code
						}
						this.requestCenter.rouseOrderPay(rousePayParams).then(payRes => {
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: payRes.timeStamp,
								nonceStr: payRes.nonceStr,
								package: payRes.package,
								signType: payRes.signType,
								paySign: payRes.paySign,
								success: function(res) {
									uni.showToast({
										title: "支付成功!",
										duration: 500,
										complete: () => {
											const eventChannel = this.getOpenerEventChannel();
											eventChannel.emit('orderBack')
											uni.navigateBack()
										}
									})
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
						})
					},
				})
			},
			
			//图片预览
			imagePreviewClick(urls, index){
				uni.previewImage({
					urls: urls,
					current: index
				})
			},
			
			//异常上报
			abnormalClick(item) {
				uni.navigateTo({
					url: `/pages/order-abnormal-report/order-abnormal-report?orderNo=${item.orderNo}&userType=1`
				})
			},
			
			//上报记录
			abnormalRecordClick(item){
				uni.navigateTo({
					url: `/pages/order-report-record/order-report-record?orderNo=${item.orderNo}`
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page-content{
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.time-layout{
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 28rpx;
		color: #01CBFF;
		background-color: #ECF7F9;
	}
	.bg-layout{
		display: flex;
		flex-direction: column;
		padding: 0 32rpx;
		box-sizing: border-box;
		background-color: white;
	}
	.store{
		font-size: 32rpx;
		color: #021624;
		line-height: 44rpx;
		margin-top: 32rpx;
		font-weight: 500;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.assistant-leve{
		width: 114rpx;
		height: 40rpx;
		margin-left: 16rpx;
	}
	.content{
		font-size: 28rpx;
		color: #021624;
		line-height: 40rpx;
		margin-top: 8rpx;
	}
	.money{
		color: #ED3C3D !important;
	}
	.item-row,
	.item-row-divider{
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 88rpx;
		font-size: 28rpx;
		justify-content: space-between;
		:first-child{
			color: #585F70;
		}
		:last-child{
			color: #021624;
		}
	}
	.item-row-divider{
		border-bottom: solid 1rpx #F5F5F5;
	}
	.divider{
		width: 100%;
		height: 1rpx;
		background-color: #F5F5F5;
	}
	.flex-wrap-row{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		border-bottom: solid 1rpx #F5F5F5;
		.image-info{
			width: 336rpx;
			height: 200rpx;
			border-radius: 16rpx;
		}
	}
	.bottom-row{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		padding: 18rpx 24rpx;
		box-sizing: border-box;
		background-color: white;
		.pay-amount{
			font-size: 40prx;
			color: #ED3C3D;
			font-weight: 400;
		}
		.btn1,
		.btn2{
			width: 176rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			border-radius: 32rpx;
			font-size: 28rpx;
			margin-left: 32rpx;
		}
		.btn1{
			background: #FFFFFF;
			border: 1rpx solid #ABAFB7;
			color: #585F70;
		}
		.btn2{
			background: #FFFFFF;
			border: 1rpx solid #01CBFF;
			color: #01CBFF;
		}
	}
	
</style>
